<script setup lang="ts">
import type { IamMember } from './type'
import { enumStatus } from './type'
import { useRoute } from 'vue-router'
const route = useRoute()
const baseApi = '/iam-member'

const { loadData, loading, model } = useDetail<IamMember>(baseApi)

onMounted(() => {
  loadData(route.query.id as string)
})
</script>

<template>
  <el-empty v-if="!Object.keys(model).length" v-loading="loading" />

  <el-descriptions v-else v-loading="loading" label-width="100px" :column="3" border>
    <el-descriptions-item label="昵称" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.nickname }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="头像" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        <el-image :src="model.avatarUrl" style="width: 50px; height: 50px" />
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="手机号" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.mobilePhone }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="性别" label-class-name="item-label" label-align="right">
      {{ model.gender || '未设置' }}
    </el-descriptions-item>
    <el-descriptions-item label="实名" label-class-name="item-label" label-align="right">
      <el-tag effect="dark" :type="enumStatus?.[model.isAuthentication]?.color">
        {{ enumStatus?.[model.isAuthentication]?.label }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item v-if="model.idCardBack" label="身份证背面" label-class-name="item-label" label-align="right">
      <el-image :src="model.idCardBack" :preview-src-list="[model.idCardBack]" style="width: 50px; height: 50px" />
    </el-descriptions-item>
    <el-descriptions-item label="身份证号码" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.idCard }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="邀请码" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.inviteCode }}
      </span>
    </el-descriptions-item>

    <el-descriptions-item label="账户金额" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.accountBalance }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item v-if="model.aliRealName" label="支付宝姓名" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.aliRealName }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item v-if="model.aliPhone" label="支付宝电话" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.aliPhone }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item v-if="model.aliAccount" label="支付宝账号" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.aliAccount }}
      </span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped lang="scss">
.el-descriptions {
  :deep(.el-descriptions__header) {
    margin: 0 10px 12px;
  }

  :deep(.item-label) {
    width: 80px;
  }
}
.operation {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
</style>
